<template>
	<view class="all">
		<view class="tip">
			<view class="text">机房高温预防数值：</view>
			<uni-number-box :min="20" :max="35" class="input" v-model="computerRoom.data.temperature" maxlength="2"
			 background="#2979FF" color="#fff" type="number"/>
			<view class="unit">°C</view>
			<uni-icons @click="showHelp" style="float: right;margin-right: 2rem;" type="help"/>
		</view>
		<view>
			<uni-forms-item style="padding-left: 2rem;" label="空调状态">
				<switch @change="changeSwitch" :checked="computerRoom.data.airConditionerSwitch"/>
			</uni-forms-item>
		</view>
		<uni-card title="设备列表" sub-title="设备名称请勿重复" extra="当前暂不支持区分设备状态">
			<uni-list class="showPanel" v-if="computerRoom.data.equipmentList!=null&&computerRoom.data.equipmentList!=[]">
				<uni-list-item ellipsis="1" :title="'名称：'+item.name" :note="'数量：'+item.number+item.unit" v-for="item in computerRoom.data.equipmentList">
					<template v-slot:footer>
						<button class="buttons" @click="del(item.name)" type="warn" size="mini">
							<uni-icons style="color: white;" type="trash"/>删除
						</button>
						<button class="buttons" type="primary" size="mini">
							<uni-icons style="color: white;" type="compose"/>编辑
						</button>
					</template>
				</uni-list-item>
			</uni-list>
			<view style="text-align: center;" v-else>暂无设备信息</view>
			<button class="add" @click="openAddPanel">新增</button>
		</uni-card>
		<view class="bottom">
			<uni-list-item title="导出">
				<template v-slot:footer>
					<button @click="outJson" size="mini">JSON导出</button>
					<button @click="outExcel" size="mini">表格导出</button>
					<button @click="outTxt" size="mini">文本导出（推荐）</button>
				</template>
			</uni-list-item>
			<uni-list-item title="导入">
				<template v-slot:footer>
					<button @click="selectJson" size="mini">JSON导入</button>
					<button @click="selectExcel" size="mini">表格导入</button>
					<button @click="selectTxt" size="mini">文本导入（推荐）</button>
				</template>
			</uni-list-item>
		</view>
		<uni-popup ref="help" type="dialog">
			<uni-card style="width: 80vw;" title="帮助">
				<uni-forms-item label="机房高温预警值范围">20-35</uni-forms-item>
				<uni-forms-item label="设备数量范围(含合并后)">1-10000；合并不对单位进行处理，如需更改单位，请点编辑。</uni-forms-item>
				<uni-forms-item label="设备存储数量上限">暂未设限</uni-forms-item>
			</uni-card>
		</uni-popup>
		<uni-popup ref="add" type="dialog">
			<uni-card class="popup">
				<template v-slot:title>
					<uni-list>
						<uni-list-item title="新增设备"></uni-list-item>
					</uni-list>
				</template>
				<text><text style="color: red;">*</text>设备名称</text>
				<input class="inputs" placeholder="2-20字符" :maxlength="20" v-model="newEquipment.data.name"/>
				<text><text style="color: red;">*</text>设备数量</text>
				<uni-number-box :min="1" :max="10000" class="input" v-model="newEquipment.data.number"
				 background="#2979FF" color="#fff" type="number"/>
				<uni-section title="单位" type="line">
				  <uni-data-select
					v-model="newEquipment.data.unit"
					:localdata="range"
					:clear="true"
				  ></uni-data-select>
				</uni-section>
				<button style="margin-top: 5vh;" type="primary" @click="makesure">确定</button>
			</uni-card>
		</uni-popup>
		<uni-popup ref="json" type="dialog">
			<uni-card style="width: 80vw;" title="机房数据">
				<textarea :placeholder="json" disabled/>
				<view slot="actions">
					<view class="card-actions-item" @click="share">
						<uni-icons type="redo" size="18" color="#999"></uni-icons>
						<text>分享</text>
					</view>
				</view>
			</uni-card>
		</uni-popup>
		<uni-popup ref="selectJson" type="dialog">
			<uni-card style="width: 80vw;" title="机房数据">
				<textarea v-model="json" placeholder="请输入数据"/>
				<view slot="actions">
					<button size="mini" @click="makesureJson">确定</button>
				</view>
			</uni-card>
		</uni-popup>
	</view>
</template>

<script>
    import { reactive, ref, watch } from 'vue';

	export default {
		data() {
			var computerRoom=reactive({
				data:{
					equipmentList:[]
				}
			})
			var newEquipment=reactive({
				data:{
					name:"",
					number:1,
					unit:''
				}
			})
			const range=[{
				value:"台",
				text:"台"
			},{
				value:"米",
				text:"米"
			},{
				value:"箱",
				text:"箱"
			}]
			var json=ref("")
			watch(()=>computerRoom.data.temperature,(newVal, oldVal)=>{
				if(newVal!=oldVal)
				    this.update()
			})
			return {
				computerRoom,
				newEquipment,
				range,
				json
			}
		},
		onShow() {
			var local=uni.getStorageSync("computerRoom")//获取机房信息
			if(local=='')//机房信息未初始化
				return
			local=JSON.parse(local)
			this.computerRoom.data=local
		},
		methods: {
			searchEquipment(name){//查询设备是否已经存在，存在返回对应下标，不存在返回-1
				for(var i=0;i<this.computerRoom.data.equipmentList.length;i++){//检查是否有同名设备
					if(this.computerRoom.data.equipmentList[i].name==name){//同名合并
						return i
					}
				}
				return -1
			},
			
			update(){
				uni.setStorageSync("computerRoom",JSON.stringify(this.computerRoom.data))
			},
			showHelp(){
				this.$refs.help.open()
			},
			changeSwitch(event){
				this.computerRoom.data.airConditionerSwitch=event.detail.value
				uni.setStorageSync("computerRoom",JSON.stringify(this.computerRoom.data))
			},
			del(name){
				uni.showModal({
					content:"确定删除"+name+"吗？",
					success: (res) => {
						if(res.confirm){//用户确定删除
							var index=this.searchEquipment(name)
							this.computerRoom.data.equipmentList.splice(index,1)//页面删除
							uni.setStorageSync("computerRoom",JSON.stringify(this.computerRoom.data))//本地删除
							uni.showToast({
								title:"移除成功"
							})
						}
					}
				})
			},
			openAddPanel(){
				this.$refs.add.open()
			},
			makesure(){
				if(!/^.{2,20}$/.test(this.newEquipment.data.name)||this.newEquipment.data.number==NaN){
					uni.showToast({
						title:"必填字段错误",
						icon:'error'
					})
					return
				}
				if(this.computerRoom.data.equipmentList==undefined)
					this.computerRoom.data.equipmentList=[]
				var index=this.searchEquipment(this.newEquipment.data.name)//同名设备的下标
				if(index==-1){//设备不存在
					this.computerRoom.data.equipmentList.push(JSON.parse(JSON.stringify(this.newEquipment.data)))//去除双向绑定
					uni.setStorageSync("computerRoom",JSON.stringify(this.computerRoom.data))
				} else {
					uni.showModal({
						content:"存在同名设备，请选择是否合并数量？",
						success: (res) => {
							if(res.cancel)//取消合并
							    return
							if(this.computerRoom.data.equipmentList[index].number+this.newEquipment.data.number>10000){
								uni.showToast({
									title:"合并后的数量超过10000台",
									icon:'fail'
								})
								return
							}
							this.computerRoom.data.equipmentList[index].number+=this.newEquipment.data.number//选择合并，页面更新
							uni.setStorageSync("computerRoom",JSON.stringify(this.computerRoom.data))//本地数据更新
							uni.showToast({
								title:"已合并",
								position:"top"
							})
							return
						}
					})
				}
				this.$refs.add.close()
			},
			outJson(){
				this.json=JSON.stringify(this.computerRoom.data)
				this.$refs.json.open()
			},
			outExcel(){
				uni.showToast({
					title:"功能开发中",
					position:'top',
					icon:'none'
				})
			},
			outTxt(){
				uni.showToast({
					title:"功能开发中",
					position:'top',
					icon:'none'
				})
			},
			selectJson(){
				this.$refs.selectJson.open()
			},
			makesureJson(){
				try{
					var newComputerRoom=JSON.parse(this.json)
					this.computerRoom.data=newComputerRoom
				} catch(e){
					uni.showModal({
						content:"数据格式错误"
					})
					return
				}
				uni.setStorageSync("computerRoom",JSON.stringify(newComputerRoom))
				uni.showToast({
					title:"导入成功"
				})
			},
			selectExcel(excel){
				uni.showToast({
					title:"功能开发中",
					position:'top',
					icon:'none'
				})
			},
			selectTxt(txt){
				uni.showToast({
					title:"功能开发中",
					position:'top',
					icon:'none'
				})
			},
			share(){
				uni.setClipboardData({
					data:this.json,
					success: () => {
						uni.showToast({
							title:"数据已复制"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
*{
	margin: 0;
	padding: 0;
}
.all{
	width: 100vw;
	margin: 0;
	padding: 0;
	.tip{
		width: 100vw;
		height: 2rem;
		margin-top: 2vh;
		.text{
			width: 50vw;
			text-align: right;
			float: left;
		}
		.input{
			max-width: 5rem;
			float: left;
		}
		.unit{
			float: left;
		}
	}
	.showPanel{
		height: 50vh;
		overflow-y: scroll;
	}
	.buttons{
		font-size: xx-small;
		height: 2rem;
		line-height: 2rem;
		margin-left: 0.5rem;
	}
	.add{
		background-color: $uni-color-success;
		color: white;
	}
	.inputs{
		margin: 5px;
		border-radius: 5px;
		border: 1px solid gray;
	}
	.bottom{
		width: 100vw;
	}
	.popup{
		overflow-y: scroll;
	}
}
</style>
